<template>
    <el-dialog
            title="登录"
            :close-on-click-modal="false"
            :visible.sync="dialogFormVisible"
            :show-close="false">
        <el-form :model="form">
            <el-form-item label="用户名称" :label-width="formLabelWidth">
                <el-input v-model="user.usrName"></el-input>
            </el-form-item>
            <el-form-item label="用户密码" :label-width="formLabelWidth">
                <el-input v-model="user.usrPassword" type="password"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="login">登录</el-button>
        </div>
    </el-dialog>
</template>
<script>
  export default {
    data () {
      return {
        user: {
          usrName: '',
          usrPassword: ''
        },
        dialogFormVisible: true,
        form: {},
        formLabelWidth: '120px'
      }
    },
    methods: {
      login () {
        // 可以在main.js中统一设置请求的地址axios.defaults.baseURL = 'http://localhost:8001'
        const url = '/vueboot/dologin'
        this.$ajax
          .post(url, this.user)
          .then((res) => {
            console.log(res.data)
            if (res.NOTEXIST == '用户名不存在') {
              this.$message.error('用户名不存在')
            } else if (res.PASSWORDWERROR == '用户名密码不正确') {
              this.$message.error('用户名密码不正确')
            } else {
              console.log('登录正确')
              window.sessionStorage.setItem('storeData', res.data)
              window.sessionStorage.setItem('user', this.user.usrName)
              window.sessionStorage.setItem('userid', res.data.user.usrId)
              //保存服务器响应返回的token
              window.localStorage.setItem('token', res.headers.token)
              this.$router.push('/welcome')
            }
            this.dialogFormVisible = false
          })
          .catch((error) => {
            this.$message.error('用户名不正确')
          })
      }
    }
  }
</script>
<style>
</style>
